import React from 'react';
import { createAppContainer, createBottomTabNavigator } from "react-navigation";
import { HomeNavigator, XugeNavigator, IssueNavigator, ChooseNavigator, MineNavigator } from './tab-nav';
import { StyleSheet, Image } from 'react-native';
const TabNavigator = createBottomTabNavigator(
    {
        Home: {
            screen: HomeNavigator,
            navigationOptions: (navigation) => {
                return {
                    //底部导航的文本
                    tabBarLabel: '首页',
                    tabBarVisible:false,
                    //底部导航的图标
                    tabBarIcon: ({ focused }) => {
                        var imageIcon = require('./assets/images/home-off.png');
                        if (focused) {
                            imageIcon = require('./assets/images/home-on.png');
                        }
                        return <Image style={styles.homeIcon} source={imageIcon} />
                    },
                }
            }
        },
        Xuge: {
            screen: XugeNavigator,
            navigationOptions: () => ({
                tabBarLabel: '虚戈',
                tabBarIcon: ({ focused }) => {
                    var imageIcon = require('./assets/images/live-off.png');
                    if (focused) {
                        imageIcon = require('./assets/images/live-on.png');
                    }
                    return <Image style={styles.xugeIcon} source={imageIcon} />
                },
            })
        },
        Issue: {
            screen: IssueNavigator,
            navigationOptions: () => ({
                tabBarLabel: ' ',
                tabBarIcon: ({ focused }) => <Image style={styles.issueIcon} source={require('./assets/images/issue.png')} />
            })
        },
        Choose: {
            screen: ChooseNavigator,
            navigationOptions: () => ({
                tabBarLabel: '商城',
                tabBarIcon: ({ focused }) => {
                    var imageIcon = require('./assets/images/play-off.png');
                    if (focused) {
                        imageIcon = require('./assets/images/play-on.png');
                    }
                    return <Image style={styles.chooseIcon} source={imageIcon} />
                }
            })
        },
        Mine: {
            screen: MineNavigator,
            navigationOptions: () => ({
                tabBarLabel: '我的',
                tabBarIcon: ({ focused }) => {
                    var imageIcon = require('./assets/images/my-off.png');
                    if (focused) {
                        imageIcon = require('./assets/images/my-on.png');
                    }
                    return <Image style={styles.mineIcon} source={imageIcon} />
                },
            })
        }
    },
    {
        initialRouteName: "Xuge",
        tabBarOptions: {
            activeTintColor: '#da0000',
            style: {
                height: 60,
                backgroundColor: '#fff',
            },
        }
    }
)

const styles = StyleSheet.create({
    homeIcon: {
        width: 22,
        height: 22,
        marginRight: 1.8
    },
    xugeIcon: {
        width: 27.85,
        height: 22,
        marginRight: 1.8
    },
    issueIcon: {
        width: 45,
        height: 45,
        marginTop: 25
    },
    chooseIcon: {
        width: 22,
        height: 22,
        marginRight: 1.8
    },
    mineIcon: {
        width: 16.75,
        height: 22,
        marginRight: 1.8
    }
})

export default createAppContainer(TabNavigator);